﻿@using OA.AspNetCore.Html;
@using OA.Model;
@using OA.Core.Model;
@using OA.Core.Helper
@model CustomForm
@{
    ViewBag.Title = "编辑打印模版";
    Layout = "~/Areas/Admin/Views/Shared/_form_layout.cshtml";
    var extendFields = JsonHelper.DeserializeList<ExtendField>(Model.ExtendField);
    if (extendFields == null) { extendFields = new List<ExtendField>(); }
    extendFields.Add(new ExtendField() { Name = "主题", Attribute = "T", Sort = -1 });
    extendFields.Add(new ExtendField() { Name = "主办部门", Attribute = "D", Sort = -1 });
    extendFields.Add(new ExtendField() { Name = "主办人", Attribute = "S", Sort = -1 });
    extendFields.Add(new ExtendField() { Name = "主办部门+主办人", Attribute = "B", Sort = -1, Status = -1 });
    extendFields.Add(new ExtendField() { Name = "主办部门+主办岗位", Attribute = "C", Sort = -1, Status = -1 });
    extendFields.Add(new ExtendField() { Name = "主办岗位+主办人", Attribute = "E", Sort = -1, Status = -1 });
    extendFields.Add(new ExtendField() { Name = "主办部门+主办岗位+主办人", Attribute = "F", Sort = -1, Status = -1 });
    extendFields.Add(new ExtendField() { Name = "申请时间", Attribute = "A", Sort = -1 });
    extendFields.Add(new ExtendField() { Name = "主办岗位", Attribute = "P", Sort = -1 });
    extendFields.Add(new ExtendField() { Name = "单据编号", Attribute = "N", Sort = -1 });
    extendFields = extendFields.OrderBy(m => m.Sort).ToList();
    if(string.IsNullOrWhiteSpace(Model.PrintTemplate))
    {
        Model.PrintTemplate = @"<table class=""layui-table mytable"" style=""width: 100%;"" data-index=""1"">
                    <tbody>
                        <tr><td style=""width:100%""></td></tr>
                    </tbody>
                </table><table class=""layui-table mytable"" style=""width: 100%;"" data-index=""2"">
                    <tbody>
                        <tr><td style=""width:25%""></td><td style=""width:25%""></td><td style=""width:25%""></td><td style=""width:25%""></td></tr>
                    </tbody>
                </table><table class=""layui-table mytable"" style=""width: 100%;"" data-index=""3"">
                    <tbody>
                        <tr><td style=""width:25%""></td><td style=""width:25%""></td><td style=""width:25%""></td><td style=""width:25%""></td></tr>
                    </tbody>
                </table><table class=""layui-table mytable"" style=""width: 100%;"" data-index=""4"">
                    <tbody>
                        <tr><td style=""width:25%""></td><td style=""width:25%""></td><td style=""width:25%""></td><td style=""width:25%""></td></tr>
                    </tbody>
                </table>";
    }
    List<ApprovalProcessNodeInfo> nodes = JsonHelper.DeserializeList<ApprovalProcessNodeInfo>(Model.ApprovalProcessNodeContent);
}
<link href="/admin/iconfont/remixicon.css" rel="stylesheet">
<style type="text/css">
    #Controls {
        background-color: #fff;
    }

        #Controls .list-group-item {
            min-height: 32px;
            cursor: pointer;

        }

    .list-group-item a {
        border: 1px solid #ddd;
        color: #ffffe6 !important;
        display: block;
        cursor: move;
        font-size: 12px;
        letter-spacing: 0;
        padding-right: 4px;
    }

        .list-group-item a i {
            font-size: 16px;
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 0px;
            margin-left: 6px;
            color: #808080
        }

        .list-group-item a span {
            display: inline-block;
            vertical-align: middle;
            color: #808080;
            cursor: move;
            font-size: 12px;
            letter-spacing: 0;
        }

    #Controls .list-group-item {
        font-size: 12px;
        display: block;
        min-width: 86px;
        line-height: 26px;
        position: relative;
        float: left;
        left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 1%;
        float: left;
    }


    #Content table td {
        padding: 0px !important;
        height: 39px !important;
    }

    #Property .title, .tdConfig div {
        margin: 3px 0 9px 0;
        clear: both;
    }

    #tdConfig div {
        float: left;
        clear: both;
    }

    #tdConfig input {
        margin-bottom: 6px;
        width: 120px;
        float: left;
    }

    #tdConfig i {
        float: left;
        font-size: 18px;
        color: red;
        line-height: 38px;
        margin-left: 10px;
        cursor: pointer;
    }

    .layui-table, .layui-table-view {
        margin: 0px !important;
        margin-top: -1px !important;
    }

    #Content .list-group-item {
        cursor: pointer;
        background-color: #ffffe6;
        display:inline-block;
    }

    .mytable tbody tr td span {
        display: block;
        padding: 9px 6px;
    }

    .mytable tbody tr td div:not(:first-child) {
        border-top: 1px solid #ddd;
    }

    .mytable2 tbody tr td:not(:first-child) {
        border-left: none !important;
    }

    .mytable2 tbody tr td:not(:last-child) {
        border-right: none !important;
    }

    .mytable3 tbody tr td {
        border-right: none;
        border-left: none;
        border-bottom: none;
    }
</style>
<div style="background-color: #fff; padding: 10px; border: 1px solid #ddd;clear:both;height:42px;">

    
    <div style="float:right;width:300px;text-align:right;display:inline-block;">
        <button type="button" class="layui-btn layui-btn-danger saveCustomForm">保存打印模版</button>
        <div style="float: right; width: 43px; height: 43px; overflow: hidden;margin-left:20px;" id="deleteContent">
            <i class="layui-icon layui-icon-delete" style="font-size:38px;float:left;color:red;"></i>
        </div>
    </div>

</div>
<div class="layui-form layui-tab-content" style="padding:0px;text-align:center;margin:10px auto 0 auto;">
    <div style="width:1392px;margin:0 auto;text-align:center;">
        @using (Html.BeginForm(FormMethod.Post, htmlAttributes: new { @class = "layui-form", id = "myForm" }))
        {
            @Html.AntiForgeryToken()
        <div id="Controls" style="border: 1px solid #ddd; width: 300px; float: left; height: 800px;">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend style="font-size:13px;">文字标签</legend>
                </fieldset>
                @foreach (var item in extendFields)
                {
                    if (item.Type == 99 || item.Status == -1) { continue; }
                    string data = ($"<span class='tag'>{item.Name}</span>").ToBase64();
                    <div class="list-group-item">
                        <a>
                            <i class="iconfont ri-input-method-line"></i>
                            <span>@item.Name</span>
                            <input class="data" type="hidden" value="@data" />
                        </a>
                    </div>
                }

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px; clear: both; width: 100%; float: left;">
                    <legend style="font-size:13px;">表单数据标签</legend>
                </fieldset>
                @foreach (var item in extendFields)
                {
                    if (item.Type == 99) { continue; }
                    string data = ($"<span>{item.Name}_{item.Attribute}</span>").ToBase64();
                    <div class="list-group-item">
                        <a>
                            <i class="iconfont ri-input-method-line"></i>
                            <span>@item.Name</span>
                            <input class="data" type="hidden" value="@data" />
                        </a>
                    </div>
                }


                <fieldset class="layui-elem-field layui-field-title" style="margin: 20px 0;clear:both;width:100%;float:left;">
                    <legend style="font-size:13px;">表格标签</legend>
                </fieldset>
                @foreach (var item in extendFields)
                {
                    if (item.Type != 99) { continue; }
                    string data = ($"<span>{item.Name}_{item.Attribute}</span>").ToBase64();
                    string data2 = ($"<span class='tag'>{item.Name}</span>").ToBase64();

                    <div class="list-group-item">
                        <a>
                            <i class="iconfont ri-input-method-line"></i>
                            <span>@item.Name</span>
                            <input class="data" type="hidden" value="@data" />
                        </a>
                    </div>
                }

                <fieldset class="layui-elem-field layui-field-title" style="margin: 20px 0;clear:both;width:100%;float:left;">
                    <legend style="font-size:13px;">审批标签</legend>
                </fieldset>
                @if (nodes != null && nodes.Count > 0)
                {
                    foreach (var item in nodes)
                    {
                        string data = ($"<span>ApprovalProcess__{item.Name}</span>").ToBase64();
                        <div class="list-group-item">
                            <a>
                                <i class="iconfont ri-input-method-line"></i>
                                <span>@item.Name</span>
                                <input class="data" type="hidden" value="@data" />
                            </a>
                        </div>
                    }
                }
            </div>
            <div id="Property" style="border: 1px solid #ddd; float: right; width: 260px; padding:10px; background-color: #fff; text-align:left;">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">标签属性</li>
                        <li id="rowInfo">行属性</li>

                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div>
                                <div class="title" title="标签内容">标签内容</div>
                                <div style="width:180px;">
                                    <input type="text" class="layui-input TagContent" id="TagContent" />
                                </div>
                            </div>
                            <div>
                                <div class="title" title="标签宽度">标签宽度</div>
                                <div style="width:180px;">
                                    <input type="number" max="100" min="0" class="layui-input TagWidth" id="TagWidth" />
                                </div>
                            </div>
                            <div>
                                <div class="title" title="标签行高">标签行高</div>
                                <div style="width:180px;">
                                    <select id="Colspan" lay-filter="Colspan">
                                        <option value="20px">1行高度</option>
                                        <option value="59px">2行高度</option>
                                        <option value="98px">3行高度</option>
                                        <option value="137px">4行高度</option>
                                        <option value="174px">5行高度</option>
                                        <option value="215px">6行高度</option>
                                    </select>
                                </div>
                            </div>
                            <div class="title" title="字体大小">字体大小</div>
                            <div style="width: 180px;">
                                <select id="FontSize" lay-filter="FontSize">
                                    <option value="12px">12px</option>
                                    <option value="13px">13px</option>
                                    <option value="14px">14px</option>
                                    <option value="15px">15px</option>
                                    <option value="16px">16px</option>
                                    <option value="17px">17px</option>
                                    <option value="18px">18px</option>
                                    <option value="24px">24px</option>
                                    <option value="32px">32px</option>
                                    <option value="48px">48px</option>
                                </select>
                            </div>

                            <div class="title" title="字体粗细">字体粗细</div>
                            <div style="width: 180px;">
                                <select id="FontWeight" lay-filter="FontWeight">
                                    <option value="normal">默认值(normal)</option>
                                    <option value="bold">粗体(bold)</option>
                                    <option value="bolder">更粗</option>
                                    <option value="100">100</option>
                                    <option value="200">200</option>
                                    <option value="300">300</option>
                                    <option value="400">400(normal)</option>
                                    <option value="500">500</option>
                                    <option value="600">600</option>
                                    <option value="700">700(bold)</option>
                                    <option value="800">800</option>
                                    <option value="900">900</option>
                                </select>
                            </div>

                            <div class="title" title="水平对齐方式">水平对齐方式</div>
                            <div style="width: 180px;">
                                <select id="TextAlign" lay-filter="TextAlign">
                                    <option value="left">左对齐</option>
                                    <option value="right">右对齐(bold)</option>
                                    <option value="center">居中对齐</option>
                                    <option value="justify">两端对齐</option>
                                </select>
                            </div>

                        </div>
                        <div class="layui-tab-item">
                            <div class="title" title="边框设定">边框设定</div>
                            <div style="width: 180px;">
                                <select id="Border" lay-filter="Border">
                                    <option value="">有边框</option>
                                    <option value="mytable2">td无边框(bold)</option>
                                    <option value="mytable3">tr无边框</option>
                                </select>
                            </div>
                            <div>
                                <div class="title" title="列宽">列宽(合计100)，当前列宽合计&nbsp;&nbsp;<span id="trWidth">0</span></div>
                                <div id="tdConfig">
                                    <div data-index="0">
                                        <input type="number" min="1" max="100" value="100" class="layui-input" autocomplete="off" placeholder="宽度" />
                                        <i class="layui-icon layui-icon-close-fill"></i>
                                    </div>
                                </div>
                                <div style="clear:both;">
                                    <button type="button" class="layui-btn layui-btn-sm" onclick="addItemColspan(this)" style="margin-right:12px;">添加一列</button>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <div style="border: 1px solid #ddd; min-height: 800px; padding: 20px; margin-left: 310px; margin-right: 280px; background-color: #fff;width:750px;">
                <div id="Content">
                    @Html.Raw(Model.PrintTemplate)
                </div>
               
                <table class="layui-table addItemRow" style="width: 100%;">
                    <tfoot>
                        <tr><td style="text-align:right;"><button type="button" class="layui-btn layui-btn-sm" onclick="addItem()" style="margin-right:12px;">添加一行</button></td></tr>
                    </tfoot>
                </table>
            </div>

        }
    </div>

</div>
<script type="text/javascript" src="~/js/base64.min.js"></script>
<script type="text/javascript" src="~/js/Sortable.js"></script>
<script type="text/javascript">
    function addItem() {
        var lastIndex = $("#Content .mytable").last().attr("data-index");
        var newIndex = parseInt(lastIndex) + 1;
        $("#Content").append('<table class="layui-table mytable" data-index="' + newIndex + '" style="width:100%;"><tbody><tr><td style="width:16.66%"></td><td style="width:16.66%"></td><td style="width:16.66%"></td><td style="width:16.66%"></td><td style="width:16.66%"></td><td style="width:16.7%"></td></tr></tbody></table>');
        InintControl();
    }
</script>
<script type="text/javascript">

    new Sortable(Controls, {
        group: {
            name: 'shared',
            pull: 'clone',
            put: false,
        },
        animation: 150,
        sort: false,
        onEnd: function (evt) {
            if ($(evt.to).prop("id") != "Controls" && $(evt.from).prop("id") == "Controls") {
                var origEl = evt.item;
                var cloneEl = evt.clone;
                var base64Info = $(cloneEl).find(".data").val();
                var contolInfo = Base64.decode(base64Info);
                origEl.innerHTML = contolInfo;

            }
            if ($(evt.to).prop("id") == "deleteContent" && $(evt.from).prop("id") == "Controls") {
                var origEl = evt.item;
                var cloneEl = evt.clone;
                origEl.innerHTML = '';
            }
        },

    });
    //new Sortable(Content, {
    //    group: 'shared',
    //    animation: 150,
    //    onEnd: function (evt) {
    //        console.log(evt.clone.innerHTML)
    //        console.log(evt.item.innerHTML)
    //        if ($(evt.clone).hasClass("hang")) {
    //            if ($(evt.to).prop("id") != "Content") {
    //                evt.clone.innerHTML = evt.item.innerHTML;
    //                evt.item.innerHTML = "";
    //                return;
    //            }
    //        }
    //    },
    //});
    var sortables = [];
    function InintControl() {
        $("#Content .layui-table tbody td").each(function (index, item) {
            //$(item).Sortable("destroy");
        });
        
        $("#Content .layui-table tbody td").each(function (index, item) {            
            var info=new Sortable(item, {
                group: 'shared',
                animation: 150,
                onEnd: function (evt) {
                    if ($(evt.to).prop("id") == "deleteContent") {
                        var origEl = evt.item;
                        var cloneEl = evt.clone;
                        origEl.innerHTML = '';
                    }
                },
            });
            sortables.push($(item));
        });
    }
    new Sortable(deleteContent, {
        group: 'shared',
        animation: 150,

    });
    InintControl();
</script>
<script type="text/javascript">
    $(".Preview").click(function () {
        var html= $("#Content").html()
        $.ajax({
            type: 'POST',
            url: '/Admin/CustomForm/PrintTemplatePreview',//发送请求
            traditional: true,
            data: { html: html },
            dataType: "html",
            success: function (result) {
                var htmlCont = result;
                layer.open({
                    type: 1,
                    title: '表单预览',
                    shadeClose: false,
                    area: ['90%', '90%'],
                    content: htmlCont
                });
            }
        });
    });
    $(".saveCustomForm").click(function () {
         
        $.ajax({
            type: 'POST',
            url: '/Admin/CustomForm/SavePrintTemplate',//发送请求
            traditional: true,
            data: { id:@Model.ID, html: $("#Content").html() },
            dataType: "json",
            success: function (result) {
                if (result.State == 200) {
                    layer.msg("打印模版保存成功!");
                }
                else {
                    layer.msg(result.Msg);
                }
            }
        },'json');

    });
</script>
<script type="text/javascript">
    layui.use(['form', 'element',], function () {
        form = layui.form
            , element = layui.element;

        form.on('select(Colspan)', function (data) {
            if (currentSpan == null) {
                layer.msg("请选择一个标签");
                return;
            }
            var value = data.value;
            currentSpan.css("height", value);
            currentSpan.css("line-height", value);
        });
        form.on('select(FontSize)', function (data) {
            if (currentSpan == null) {
                layer.msg("请选择一个标签");
                return;
            }
            var value = data.value;
            currentSpan.css("font-size", value);
        });
        form.on('select(FontWeight)', function (data) {
            if (currentSpan == null) {
                layer.msg("请选择一个标签");
                return;
            }
            var value = data.value;
            currentSpan.css("font-weight", value);
        });
        form.on('select(TextAlign)', function (data) {
            if (currentSpan == null) {
                layer.msg("请选择一个标签");
                return;
            }
            var value = data.value;
            currentSpan.parent().parent().css("text-align", value);
        });
        form.on('select(Border)', function (data) {
            if (currentTable == null) {
                layer.msg("请选择一行");
                return;
            }
            var value = data.value;
            currentTable.removeClass("mytable2").removeClass("mytable3");
            if (value != "") {
                currentTable.addClass(value)
            }
        });


    });

</script>
<script type="text/javascript">
    var currentTable = null;
    var currentSpan = null;
    $("#Content").on('click', '.mytable tbody tr', function () {
        currentTable = $(this).parentsUntil("#Content").last();
        InintRightItmes();
    });

    $("#Content").on('click', '.mytable tbody tr td span', function () {
        currentTable = $(this).parentsUntil("#Content").last();
        currentSpan = $(this);
        $("#Colspan").val($(this).height() + 'px');
        $("#FontWeight").val($(this).css("font-weight"));
        $("#TagWidth").val($(this).parent().prop("style").width.replace("%", ""));
        $("#FontSize").val($(this).css("font-size"));
        $("#TextAlign").val($(this).parent().css("text-align"));
        $("#TagContent").val($(this).text());
        if ($(this).hasClass("tag")) {
            $("#TagContent").prop("disabled", false);
        }
        else {
            $("#TagContent").prop("disabled", true);
        }
        form.render();
        InintRightItmes();
        return false;
    });
    
    $("#TagContent").on('input', function (e) {
        var value = e.delegateTarget.value;
        currentSpan.html(value);
    });

    $("#TagWidth").on('input', function (e) {
        var value = e.delegateTarget.value;
        currentSpan.parent().css("width", value + "%");
    });
    

    $("#Property").on('click', '.layui-icon-close-fill', function () {
        var index = $(this).parent().attr("data-index");
        var sort = Sortable.create(currentTable.find("td").eq(index)[0]);
        sort.destroy();
        $(this).parent().remove();
        currentTable.find("td").eq(index).remove();
        InintRightItmes();
        if (currentTable.find("td").length == 0) {//所有单元格都被删除，删除当前tr(table)
            currentTable.remove();
            var index = 1;
            $("#Content .mytable").each(function () {
                $(this).attr("data-index", index);
                index++;
            });
        }
        //InintControl();
    });


    function InintRightItmes() {
        $("#rowInfo").html("第&nbsp;" + currentTable.attr("data-index") + "&nbsp;行属性");
        var tdConfigContent = "";
        index = 0;
        currentTable.find("td").each(function (index, item) {
            var width = $(item).prop("style").width.replace("%", "");;
            tdConfigContent += '<div data-index="' + index + '"><input type="number" min="1" max="100" step="0.01" value="' + width + '" class="layui-input" autocomplete="off" placeholder="宽度" /><i class="layui-icon layui-icon-close-fill"></i></div>';
            index++;
        });
        $("#tdConfig").html(tdConfigContent);
        if (currentTable.hasClass("mytable3")) {
            $("#Border").val("mytable3");
        }
        else if (currentTable.hasClass("mytable2")) {
            $("#Border").val("mytable2");
        }
        else {
            $("#Border").val("");
        }
        form.render();
        GetCurrentTrAllWidth();
    }

    function addItemColspan(obj) {
        if (currentTable == "" || currentTable == null) {
            layer.msg("请选择表格的任意一行再操作");
            return;
        }
        var lastIndex = $("#tdConfig div").last().attr("data-index");
        var newIndex = parseInt(lastIndex) + 1;
        $("#tdConfig").append('<div data-index="' + newIndex + '"><input type="number" min="1" max="100" value="0" class="layui-input" autocomplete="off" placeholder="宽度" /><i class="layui-icon layui-icon-close-fill"></i></div>');
        currentTable.find("tr").append('<td style="width:0%"></td>');
        InintControl();
    }

    $("#tdConfig").on('input', "input", function (e) {
        var value = $(this).val()
        var index = $(this).parent().attr("data-index");
        currentTable.find("td").eq(index).css("width", value + "%");
        GetCurrentTrAllWidth();
    });

    function GetCurrentTrAllWidth() {
        var width = 0;
        currentTable.find("td").each(function (index, item) {
            width += parseFloat($(item).prop("style").width.replace("%", ""));
        });
        width = width.toFixed(2);
        if (width < 100) {
            $("#trWidth").html("<span style='color:green'>" + width + "</span>");
        }
        else if (width > 100) {
            $("#trWidth").html("<span style='color:red'>" + width + "</span>");
        }
        else {
            $("#trWidth").html(width);
        }
    }
</script>